<template>
	<view class="com_view">
		<scroll-view scroll-x="true" scroll-y="true" class="scroll_box">
			<view class="scroll_content">
				<!-- 表头 -->
				<view class="table_header">
					<view class="header_cell" v-for="header in tableHeader" :key="header.title" 
					:style="`--childer-num:${header.num}`" :class="header.class + ' ' + header.bg">
						<text>{{ header.title }}</text>
						<view class="header_childers">
							<view class="header_childer" v-for="child in header.childer" :key="child.title">
								<text> {{ child.title }} </text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 表格内容 -->
				<view class="table_content">
					<view v-for="(row, index) in tableData" :key="row.id">
						<view class="table_row" >
							<view class="table_cell" v-for="item in tableKey" :key="item.title"
							:class="item.class">
							<!-- class="custom-header-line-1" @click="$showFill(row[item.key], item.isHeader)"  v-if="item.isHeader && item.type==='text'" -->
								<view  v-if="item.type==='text'">
									<text>{{ row[item.key] }}</text>
								</view>
								
								<text v-else-if="item.type==='text'">{{ row[item.key] }}</text>
								
								<view class="options_line" v-else>
									<text class="option_cell" v-for="option in item.options" :key="option.value"
									:class="{'is_select_options': row[item.key] == option.value }"
									> 
										{{ option.label }} 
									</text>
								</view>
							</view>
						</view>
						
						<!-- 质量排序单行 -->
						<view class="add_line" v-if="(index + 1) % 2 === 0">
							<view class="add_line_title">
								<text>质量排序</text>
							</view>
							<view class="add_line_value">
								<text>{{ row.qualitySorting }}</text>
								<!-- <u--input placeholder="请输入您认为的排序" border="surround"
								type="textarea" @blur="submitLine" :disabled="already" style="width: 100%;"
								 v-model="qualitySorting" ></u--input> -->
							</view>
						</view>
						
						<!-- 整体质量描述单行 -->
						<view class="add_line" v-if="(index + 1) % 2 === 0">
							<view class="add_line_title">
								<text>整体质量风格描述</text>
							</view>
							<view class="add_line_value">
								<text>{{ row.styleDescription }}</text>
								<!-- <u--input placeholder="请输入整体质量风格描述" border="surround" style="width: 100%;"
								type="textarea" @blur="submitLine" :disabled="already"
								 v-model="styleDescription" ></u--input> -->
							</view>
						</view>
						
						
					</view>
					
				</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const Header = [
		{ title: '品牌', childer: [], num: 1, class: 'no_class', bg: 'no_bg' },
		{ title: '香气特性', childer: [{title: "香气质"},{title: "香气量"},{title: "透发性"},{title: "杂气"}], num: 4 },
		{ title: '烟气特性', childer: [{title: "浓度"},{title: "劲头"},{title: "细腻程度"},{title: "成团性"}], num: 4 },
		{ title: '口感特性', childer: [{title: "刺激性"},{title: "干燥感"},{title: "甜度"},{title: "余味"}], num: 4 },
	]
	const HeaderDict = [
		{ title:'编号', key:'smokeName', isHeader: true, type: 'text', class: 'no_class'},
		{ title:'香气质', key:'aromaQuality', type: 'options', 
		options:[ { label:'√', value:'√'}, { label:'0', value:'0' }]},
		{ title:'香气量', key:'aromaVolume', type: 'options', 
		options:[ { label:'√', value:'√'}, { label:'0', value:'0' }]},
		{ title:'透发性', key:'transdermal', type: 'options', 
		options:[ { label:'√', value:'√'}, { label:'0', value:'0' }]},
		{ title:'杂气', key:'impure', type: 'options', 
		options:[ { label:'√', value:'√'}, { label:'0', value:'0' }]},
		{ title:'浓度', key:'density', type: 'options', 
		options:[ { label:'+', value:'+'}, { label:'0', value:'0' }]},
		{ title:'劲头', key:'energy', type: 'options', 
		options:[ { label:'+', value:'+'}, { label:'0', value:'0' }]},
		{ title:'细腻程度', key:'delicacyLevel', type: 'options', 
		options:[ { label:'√', value:'√'}, { label:'0', value:'0' }]},
		{ title:'成团性', key:'clustering', type: 'options', 
		options:[ { label:'√', value:'√'}, { label:'0', value:'0' }]},
		{ title:'刺激性', key:'thrill', type: 'options', 
		options:[ { label:'√', value:'√'}, { label:'0', value:'0' }]},
		{ title:'干燥感', key:'dryFeeling', type: 'options', 
		options:[ { label:'√', value:'√'}, { label:'0', value:'0' }]},
		{ title:'甜度', key:'sweetness', type: 'options', 
		options:[ { label:'√', value:'√'}, { label:'0', value:'0' }]},
		{ title:'余味', key:'aftertaste', type: 'options', 
		options:[ { label:'√', value:'√'}, { label:'0', value:'0' }]},
	]
	export default{
		name: 'rankHistory',
		props:{
			already: { // 是否提交过
				type: Boolean,
				default: false
			},
			tableData:{
				type: Array,
				default: function() { return [] }
			}
		},
		computed: {
			// 表头的上级
			tableHeader() { return Header },
			// 表头的字典项
			tableKey() { return  HeaderDict },
			qualitySorting() { //排序
				if(this.tableData.length < 1) return ''
				let item = this.tableData[0]
				return item.qualitySorting
			},
			styleDescription() { //质量风格描述
				if(this.tableData.length < 1) return ''
				let item = this.tableData[0]
				return item.styleDescription
			}
		},
		data() {
			return {}
		}
	}
</script>

<style lang="scss" scoped>
	.com_view {
		width: 100%;
		// flex: 1;
		height: 600px;
		padding: 20px;
		padding-top: 0;
		--def-cell-width: 100px;
		--def-table-bg: rgb(245, 247, 250);
		--def-border-color: #ddd;
	}
	
	.submit-line {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
		.btn {
			width: 100px;
			background-color: #16b777;
		}
	}
	.scroll_box {
		width: 100%;
		height: calc(100% - 70px);
		.scroll_content{
			min-width: 100%;
			min-height: 100%;
			position: relative;
			width: max-content;
			background-color: var(--def-table-bg);
			.no_class {
				// width: 100px;
				width: 250px;
				position: sticky;
				z-index: 2;
				left: 1px;
				background-color: var(--def-table-bg);
			}
			.no_bg {
				background-image: url(@/static/Maskgroup.png);
			}
		}
	}
	
	.table_header {
		display: flex;
		align-items: center;
		width: max-content;
		background-image: url(@/static/Maskgroup.png);
		position: sticky;
		top: 0;
		z-index: 3;
		border-bottom: 1px solid var(--def-border-color);
		border-left: 1px solid var(--def-border-color);
		.header_cell {
			flex-shrink: 0;
			height: 100px;
			line-height: 50px;
			width: calc(var(--childer-num) * var(--def-cell-width));
			border-right: 1px solid var(--def-border-color);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.header_childers {
			display: flex;
			align-items: center;
			border-top: 1px solid var(--def-border-color);
			.header_childer {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: var(--def-cell-width);
				border-right: 1px solid var(--def-border-color);
			}
		}
	}
	.table_content{
		width: max-content;
		min-width: 100%;
		background-color: rgb(245, 247, 250);
		.table_row {
			width: max-content;
			min-width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid var(--def-border-color);
			border-left: 1px solid var(--def-border-color);
		}
		.table_cell {
			width: var(--def-cell-width);
			height: 50px;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 1px solid var(--def-border-color);
		}
		.options_line {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 100%;
			padding: 0 10px;
			.option_cell {
				--size: 25px;
				display: block;
				height: var(--size);
				width: var(--size);
				line-height: var(--size);
				background-color: #fff;
				color: #1f1f1f;
				text-align: center;
			}
			.is_select_options {
				background-color: #16b777;
				color: #fff;
			}
		}
	}
	
	.add_line {
		width: 100%;
		min-height: 50px;
		display: flex;
		align-items: center;
		position: relative;
		border-bottom: 1px solid var(--def-border-color);
		border-left: 1px solid var(--def-border-color);
		.add_line_title {
			// width: 100px;
			width: 250px;
			min-height: 50px;
			height: max-content;
			background-color: var(--def-table-bg);
			position: sticky;
			left: 1px;
			z-index: 2;
			border-right: 1px solid var(--def-border-color);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.add_line_value {
			flex: 1;
			padding-left: 20px;
		}
	}
</style>